<template>
  <!--
    根目录规范(必须不能为空)：
    idm-ctrl：控件类型 drag_container：容器，drag_container_inlieblock：行内容器，idm_module：非容器的组件
    id：使用moduleObject.id，如果id不使用这个将会被idm-ctrl-id属性替换
    idm-ctrl-id：组件的id，这个必须不能为空
  -->
  <div idm-ctrl="idm_module"
  :id="moduleObject.id" 
  :idm-ctrl-id="moduleObject.id"
  >
    <div class="writiShow-wrap">
      <div class="writiTitle" v-if="propData.isTips">{{ propData.titleDesc }}</div>
      <div class="writiul" v-if="propData.isContent">
        <div class="writili" v-for="(item, index) in list" :key="index" :style="computedStyleLi(item)" @click="handleClick(item)">
          <div class="writidesc">
            <span :style="computedTitle(item)">{{ item.title }}</span>
            <div :style="computedSub(item)">{{ fieldObj[item.numField] || item.titleSub }}</div>
          </div>
          <img :src="getBackImgSrc(item)" alt="" :style="computedStyleImg(item)">
        </div>
      </div>
      <div class="writiPro" v-if="propData.isProgress">
        <div class="writipro-li" v-for="(item, index) in progress" :key="index" :style="computedMeasure(item)" @click="handleClick(item)">
          <div class="writipro-line">
            <span :style="computedproFont(item)">{{ item.progressTitle }}</span>
            <span :style="computedColor(item)">{{ fieldObj[item.progresField] || item.progressNum }}{{ item.progressUnit }}</span>
          </div>
          <div class="writi-progress" :style="computedWidthStyle(item)">
            <div class="writi-line" :style="computedBgStyle(item)"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IwritiShow',
  data () {
    return {
      list: [],
      progress: [],
      moduleObject:{},
      fieldObj: {},
      inforobj: {},
      propData:this.$root.propData.compositeAttr||{
        isTips: true,
        isContent: true,
        isProgress: true,
        titleDesc: '风险管控',
        width: '400px',
        tableProgress: [
          {
            key: '1',
            progressBox: {
              marginTopVal: "",
              marginRightVal: "",
              marginBottomVal: "",
              marginLeftVal: "",
              paddingTopVal: "20px",
              paddingRightVal: "20px",
              paddingBottomVal: "20px",
              paddingLeftVal: "20px"
            },
            progressWidth: "48%",
            progressHeight: "auto",
            progressTitle: "延期率",
            progressTop: '20px',
            progressNum: "45",
            progressRadius: '50px',
            progressUnit: "%",
            proWidth: "100%",
            proHeight: "10px",
            showProgressColor: {
              hex8: "#D8D8D8FF"
            },
            progressColor: {
              hex8: "#0091FFFF"
            }
          },
          {
            key: '2',
            progressBox: {
              marginTopVal: "",
              marginRightVal: "",
              marginBottomVal: "",
              marginLeftVal: "",
              paddingTopVal: "20px",
              paddingRightVal: "20px",
              paddingBottomVal: "20px",
              paddingLeftVal: "20px"
            },
            progressWidth: "48%",
            progressHeight: "auto",
            progressTitle: "超期率",
            progressRadius: '50px',
            progressTop: '20px',
            progressNum: "45",
            progressUnit: "%",
            proWidth: "100%",
            proHeight: "10px",
            showProgressColor: {
              hex8: "#D8D8D8FF"
            },
            progressColor: {
              hex8: "#F56C6CFF"
            }
          }
        ],
        tableMenu: [
          {
            key: '1',
            libox: {
              marginTopVal: "",
              marginRightVal: "",
              marginBottomVal: "",
              marginLeftVal: "",
              paddingTopVal: "10px",
              paddingRightVal: "10px",
              paddingBottomVal: "10px",
              paddingLeftVal: "10px"
            },
            titleBottom: '10px',
            liWidth: '33%',
            title: '延期数',
            titleSub: '8000',
            bgColor: {
              hex8: "#FFFFFFFF"
            },
            image: '',
            imgwidth: '60px',
            imgheight: '80px',
            imgBottom: '0px',
            imgLeft: '0px',
          },
          {
            key: '2',
            libox: {
              marginTopVal: "",
              marginRightVal: "",
              marginBottomVal: "",
              marginLeftVal: "",
              paddingTopVal: "10px",
              paddingRightVal: "10px",
              paddingBottomVal: "10px",
              paddingLeftVal: "10px"
            },
            titleBottom: '10px',
            liWidth: '33%',
            title: '催办任务',
            titleSub: '8000',
            bgColor: {
              hex8: "#FFFFFFFF"
            },
            image: '',
            imgwidth: '60px',
            imgheight: '80px',
            imgBottom: '0px',
            imgLeft: '0px',
          },
          {
            key: '3',
            libox: {
              marginTopVal: "",
              marginRightVal: "",
              marginBottomVal: "",
              marginLeftVal: "",
              paddingTopVal: "10px",
              paddingRightVal: "10px",
              paddingBottomVal: "10px",
              paddingLeftVal: "10px"
            },
            titleBottom: '10px',
            liWidth: '33%',
            title: '超期数',
            titleSub: '8000',
            bgColor: {
              hex8: "#FFFFFFFF"
            },
            image: '',
            imgwidth: '60px',
            imgheight: '80px',
            imgBottom: '0px',
            imgLeft: '0px',
          }
        ],
        ulbox: {
          marginTopVal: "",
          marginRightVal: "",
          marginBottomVal: "",
          marginLeftVal: "",
          paddingTopVal: "",
          paddingRightVal: "10px",
          paddingBottomVal: "40px",
          paddingLeftVal: "10px"
        },
        tipsBox: {
          marginTopVal: "",
          marginRightVal: "",
          marginBottomVal: "",
          marginLeftVal: "",
          paddingTopVal: "5px",
          paddingRightVal: "",
          paddingBottomVal: "5px",
          paddingLeftVal: ""
        }
      }
    }
  },
  mounted () {
    this.moduleObject = this.$root.moduleObject
    this.init()
  },
  methods: {
    computedStyleLi (item) {
      let { libox, liWidth, liHeight, bgColor, border } = item;
      let style = {};
      liWidth && (style['width'] = liWidth);
      liHeight && (style['height'] = liHeight);
      libox && IDM.style.setBoxStyle(style, libox)
      bgColor && (style['background-color'] = bgColor && bgColor.hex8)
      border && IDM.style.setBorderStyle(style, border)
      return style
    },
    getBackImgSrc (item) {
      let { image } = item;
      return image ? IDM.url.getWebPath(image) : '';
    },
    computedStyleImg (item) {
      let { imgwidth, imgheight, imgTop, imgRight, imgBottom, imgLeft } = item;
      let style = {};
      imgwidth && (style['width'] = imgwidth);
      imgheight && (style['height'] = imgheight);
      imgTop && (style['top'] = imgTop);
      imgRight && (style['right'] = imgRight);
      imgBottom && (style['bottom'] = imgBottom);
      imgLeft && (style['left'] = imgLeft);
      return style
    },
    computedTitle (item) {
      let { titleFont, titleBottom } = item;
      let style = {};
      titleFont && IDM.style.setFontStyle(style, titleFont);
      titleBottom && (style['padding-bottom'] = titleBottom);
      style['display'] = 'inline-block';
      return style
    },
    computedSub (item) {
      let { numFont } = item;
      let style = {};
      numFont && IDM.style.setFontStyle(style, numFont);
      return style
    },
    computedMeasure (item) {
      let { progressBox, progressWidth, progressHeight, bgProgress, progressBorder } = item;
      let style = {};
      progressBox && IDM.style.setBoxStyle(style, progressBox);
      progressWidth && (style['width'] = progressWidth);
      progressHeight && (style['height'] = progressHeight);
      bgProgress && (style['background-color'] = bgProgress && bgProgress.hex8);
      progressBorder && IDM.style.setBorderStyle(style, progressBorder);
      return style
    },
    computedproFont (item) {
      let { progressTitleFont } = item;
      let style = {};
      progressTitleFont && IDM.style.setFontStyle(style, progressTitleFont);
      return style
    },
    computedColor (item) {
      let { progressNumFont } = item;
      let style = {};
      progressNumFont && IDM.style.setFontStyle(style, progressNumFont);
      return style
    },
    computedWidthStyle (item) {
      let { proWidth, proHeight, showProgressColor, progressTop, progressRadius } = item;
      let style = {};
      proWidth && (style['width'] = proWidth);
      proHeight && (style['height'] = proHeight);
      showProgressColor && (style['background-color'] = showProgressColor && showProgressColor.hex8);
      progressTop && (style['margin-top'] = progressTop);
      progressRadius && (style['border-radius'] = progressRadius);
      return style
    },
    computedBgStyle (item) {
      let { progressColor, progressNum, progressUnit, proHeight, progressRadius, progresField } = item;
      let style = {};
      progressColor && (style['background-color'] = progressColor && progressColor.hex8);
      if (this.fieldObj[progresField]) {
        style['width'] = this.fieldObj[progresField] + (progressUnit ? progressUnit : '%');
      } else {
        progressNum && (style['width'] = progressNum + (progressUnit ? progressUnit : '%'));
      }
      proHeight && (style['height'] = proHeight);
      progressRadius && (style['border-radius'] = progressRadius);
      return style
    },
    propDataWatchHandle(propData) {
      this.propData = propData.compositeAttr || {};
      this.init();
    },
    handleStyle () {
      let styleObject = {},
        tipsStyleObj = {};
      for (const key in this.propData) {
        if (this.propData.hasOwnProperty.call(this.propData, key)) {
          const element = this.propData[key]
          if (!element && element !== false && element != 0) {
            continue
          }
          switch (key) {
            case 'width':
              styleObject['width'] = element
              break
            case 'height':
              styleObject['height'] = element;
              break
            case 'ulbox':
              IDM.style.setBoxStyle(styleObject, element)
              break
            case 'bgColor':
              styleObject['background-color'] = element && element.hex8
              break
            case 'boxShadow':
              styleObject['box-shadow'] = element
              break
            case 'boxBorder':
              IDM.style.setBorderStyle(styleObject, element)
              break
            case 'tipsBox':
              IDM.style.setBoxStyle(tipsStyleObj, element)
              break
            case 'tipsBorder':
              IDM.style.setBorderStyle(tipsStyleObj, element)
              break
            case 'tipsFont':
              IDM.style.setFontStyle(tipsStyleObj, element);
              break
          }
        }
      }
      window.IDM.setStyleToPageHead(this.moduleObject.id + " .writiShow-wrap", styleObject);
      window.IDM.setStyleToPageHead(this.moduleObject.id + " .writiTitle", tipsStyleObj);
    },
    // 过滤接口参数
    fileterParams() {
      let obj = {};
      if (this.propData.customFunc && this.propData.customFunc.length > 0) {
        let name = this.propData.customFunc[0].name
        obj = window[name] && window[name].call(this, this.inforobj, this.propData.dictRule);
      }
      return obj
    },
    initData() {
      if (this.moduleObject.env == "production") {
        if (this.propData.isField && this.propData.dataSource) {
          const routerParams = this.fileterParams();
          IDM.datasource.request(this.propData.dataSource[0]?.id, {
            moduleObject: this.moduleObject,
            param: { ...routerParams }
          }, (data) => {
            if (data) {
              this.fieldObj = data;
            }
          })
        }
      }
    },
    handleClick (item) {
      if (this.propData.jumpFun && this.propData.jumpFun.length > 0) {
        let name = this.propData.jumpFun[0].name;
        window[name] && window[name].call(this, item, this.inforobj, this.propData.dictRule);
      }
    },
    init () {
      console.log(this.propData, '数据')
      this.handleStyle();
      this.propData.initLoad && this.initData();
      this.list = this.propData.tableMenu;
      this.progress = this.propData.tableProgress;
    },
    /**
     * 组件通信：接收消息的方法
     * @param {
     *  type:"发送消息的时候定义的类型，这里可以自己用来要具体做什么，统一规定的type：linkageResult（组件联动传结果值）、linkageDemand（组件联动传需求值）、linkageReload（联动组件重新加载）
     * 、linkageOpenDialog（打开弹窗）、linkageCloseDialog（关闭弹窗）、linkageShowModule（显示组件）、linkageHideModule（隐藏组件）、linkageResetDefaultValue（重置默认值）"
     *  message:{发送的时候传输的消息对象数据}
     *  messageKey:"消息数据的key值，代表数据类型是什么，常用于表单交互上，比如通过这个key判断是什么数据"
     *  isAcross:如果为true则代表发送来源是其他页面的组件，默认为false
     * } object
     */
    receiveBroadcastMessage(object) {
      switch (object.type) {
        case 'linkageDemand':
          console.log('IwritiShow接收消息: ', object.message)
          this.inforobj = object.message;
          this.initData();
          break;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.writiShow-wrap{
  .writiul {
    display: flex;
    .writili{
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .writidesc{
      text-align: center;
    }
    img{
      position: absolute;
    }
  }
  .writiPro{
    display: flex;
    .writipro-line{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .writi-progress{
      position: relative;
      .writi-line{
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}
</style>